<template>
  <div class="questions">
   <div class="countdown d-flex ai-center p-2 jc-between">
        <p>{{this.$route.query.val}}</p>
      <p><i class="el-icon-time"></i> 倒计时： {{ `${hr}: ${min}: ${sec}` }}</p>
        <el-button v-show="isshow1" @click="begin" round type="primary">开始答题</el-button>
        <el-button v-show="!isshow1" @click="open" round type="danger">交卷</el-button>
      </div>
   <div class="ques-content p-3" >
      
  <div class="ques-item " >
 <div class="single mb-3" v-for="(item,i) in model.single" :key="i">
    <div class="ques-list p-3 ">
   <div class="d-flex jc-between">
      <div class="label">单选题</div>
    <div class="sort"> <span class="current fs-18">{{i + 1}}</span>/ <span class="total">{{model.totalTitle}}</span></div>
   </div>
   <div class="d-flex mt-3">
     <div class="title mx-3">{{item.title}} </div>
   <span class="score">( {{item.score}}分 )</span>
   </div>
   <div class="options p-3" v-for="(option ,index) in item.singleOption" :key="index">
    <input type="radio" :name="`${item._id}`" :value="`${option._id}`" :id="`${option._id}`" v-model="item.pick" > <label :for="`${option._id}`" >{{option.answer}}</label>
   </div>
  </div>
 </div>
  </div>

    <div class="ques-item " >
 <div class="multiple mb-3" v-for="(item,i) in model.multiple" :key="i">
    <div class="ques-list p-3 ">
   <div class="d-flex jc-between">
      <div class="label">多选题</div>
    <div class="sort"> <span class="current fs-18">{{i + singLength + 1}}</span>/ <span class="total">{{model.totalTitle}}</span></div>
   </div>
   <div class="d-flex mt-3">
     <div class="title mx-3">{{item.title}} </div>
   <span class="score">( {{item.score}}分 )</span>
   </div>
   <div class="options p-3" v-for="(option ,index) in item.multipleOption" :key="index">
    <input type="checkbox" :name="`${item._id}`" :value="`${option._id}`" :id="`${option._id}`" v-model="item.pick" > <label :for="`${option._id}`" >{{option.answer}}</label>
   </div>
  </div>
 </div>
  </div>
  
  
    <div class="ques-item " >
 <div class="fill mb-3" v-for="(item,i) in model.fill" :key="i">
    <div class="ques-list p-3 ">
   <div class="d-flex jc-between">
      <div class="label">填空题</div>
    <div class="sort"> <span class="current fs-18">{{i + 1 + multipleLength + singLength}}</span>/ <span class="total">{{model.totalTitle}}</span></div>
   </div>
   <div class="d-flex mt-3 mb-5">
     <div class="title mx-3">{{item.title}} </div>
   <span class="score">( {{item.score}}分 )</span>
   </div>
    <el-input type="textarea"  v-model="item.answer" > </el-input>
  </div>
 </div>
  </div>

     <div class="ques-item " >
 <div class="judge mb-3" v-for="(item,i) in model.judge" :key="i">
    <div class="ques-list p-3 ">
   <div class="d-flex jc-between">
      <div class="label">判断题</div>
    <div class="sort"> <span class="current fs-18">{{i + 1 + multipleLength + singLength + fillLength}}</span>/ <span class="total">{{model.totalTitle}}</span></div>
   </div>
   <div class="d-flex mt-3 mb-2">
     <div class="title mx-3">{{item.title}} </div>
   <span class="score">( {{item.score}}分 )</span>
   </div>
   <div class="p-3">
     <div class="mb-3"> <input type="radio" :name="item._id" value="1"  v-model="item.question"><label >正确</label></div>
    <div><input type="radio" :name="item._id" value="0"  v-model="item.question"><label>错误</label></div>
    </div>
 
  </div>
 </div>
  </div>

   <div class="ques-item " >
 <div class="discuss mb-3" v-for="(item,i) in model.discuss" :key="i">
    <div class="ques-list p-3 ">
   <div class="d-flex jc-between">
      <div class="label">论述题</div>
    <div class="sort"> <span class="current fs-18">{{i + 1 + multipleLength + singLength + fillLength + judgeLength}}</span>/ <span class="total">{{model.totalTitle}}</span></div>
   </div>
   <div class="d-flex mt-3 mb-5">
     <div class="title mx-3">{{item.title}} </div>
   <span class="score">( {{item.score}}分 )</span>
   </div>
       <el-input type="textarea"  v-model="item.question" > </el-input>

  </div>
 </div>
  </div>
   </div>
   <div class="prev"></div>
   <div class="next"></div>
   <div class="footer"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {

       isshow1: true,
                time: '',
                hr: 1,
                min: 0,
                sec: 0,
                times: '',
      model: {
       title: '',
      icon: '',
      name: '',
      instructions:'',
       username: '',
      },
     
     singLength: '',
     fillLength: '',
     multipleLength: '',
    judgeLength: '',
    }
  },
props: {
id: {
  required: true
}
},
  methods: {

    async fetch() {
      console.log(this.id);
      const res = await this.$http.get(`/questions/${this.id}`)
      this.model = res.data
      this.times = res.data.duration
      this.singLength = this.model.single.length
      this.multipleLength = this.model.multiple.length
      this.fillLength = this.model.fill.length
      this.judgeLength = this.model.judge.length
      this.model.icon = this.$route.query.icon
      this.model.title = this.$route.query.title
      this.model.instructions = this.$route.query.instructions
      this.model.name = this.$route.query.name
      this.model.username = window.sessionStorage.getItem('username')
      this.model._id =  `${window.sessionStorage.getItem('username')}${this.model._id}`
    },
     begin() {
                // 点击按钮后开始计算指定长度的时间
                this.time = (Date.parse(new Date()) + ((this.times * 60)) * 1000);
                // 开始执行倒计时
                this.countdown();
                // 更换按钮，根据情况选择v-if或v-show
                this.isshow1 = false;

                this.$message({
                    type: 'success',
                    message: '开始答题'
                });
            },
            countdown() {
                const end = this.time; // 定义结束时间
                const now = Date.parse(new Date()); // 获取本地时间
                const msec = end - now; // 定义总共所需的时间
                // 将时间戳进行格式化
                let hr = parseInt(msec / 1000 / 60 / 60 % 24);
                let min = parseInt(msec / 1000 / 60 % 60);
                let sec = parseInt(msec / 1000 % 60);
                // 倒计时结束时的操作
                const that = this;
                if (this.hr == 0 && this.min == 0 && this.sec == 0) {
                    console.log('时间已经结束，答题完毕');
                    this.hr = 1;
                    this.min = 0;
                    this.sec = 0;
                } else {
                    // 如时间未归零则继续在一秒后执行
                    this.hr = hr > 9 ? hr : '0' + hr;
                    this.min = min > 9 ? min : '0' + min;
                    this.sec = sec > 9 ? sec : '0' + sec;
                    setTimeout(that.countdown, 1000)
                }
            },
            open() {
                this.$confirm('即将结束答题, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then((action) => {
                    // eleUI的确定结束回调函数方法
                    if (action === 'confirm') {
                        this.hr = 0;
                        this.min = 0;
                        this.sec = 0;
                        console.log(this.hr + ',' + this.min + ',' + this.sec);
                        this.isshow1 = true;
                    }
                   const res =  this.$http.post(`/answer`,this.model)
                  //  this.$http.post(`/mytest/${this.model.username}`,this.model)
                    this.$router.push({path: `/main`,})
                    this.$message({
                        type: 'success',
                        message: '交卷成功!'
                    });
                }).catch(() => {
                    // 点击取消后
                    this.$message({
                        type: 'info',
                        message: '已取消交卷'
                    });
                })
            }
                    
  },
  created() {
    this.fetch()
  },
}
</script>

<style>

</style>